<template>
  <div class="main_box">
    <div class="main">
        <div class="main_search_role">
            <el-input style="width:200px" v-model="searchRoleName" placeholder="请输入昵称"></el-input>
            <el-input style="width:200px;margin:0 10px" v-model="searchUserName" placeholder="请输入姓名"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加</el-button>
        </div>
        <el-dialog title="添加信息" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="昵称">
                    <el-input v-model="role"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="user"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="mobile"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onClick">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <el-table
      :data="showList"
      style="width: 1200px"
      border>
      <el-table-column
        prop="role_name"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, showList)"
          type="text"
          size="small">
          移除
        </el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-dialog title="修改设置" :visible.sync="isShow">
        <el-form :model="form">
          <el-form-item label="用户名">
            <el-input v-model="form.role_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="onSure">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            list: [],
            showList: [],
            searchRoleName: '',
            searchUserName: '',
            dialogFormVisible: false,
            isShow: false,
            form: {
                id: '',
                role_name: '',
                username: '',
                mobile: ''
            },
            role: '',
            user: '',
            mobile: '',
        }
    },
    mounted() {
        axios.get('http://localhost:8080/userlist.json').then(res=> {
            // console.log(res.data.data.users)
            this.list = res.data.data.users;
            this.showList = [...this.list]
        })
    },
    methods: {
      handleClick(row) {
        this.isShow = true;
        // console.log(row)
        this.form.id = row.id;
        this.form.role_name = row.role_name;
        this.form.username = row.username;
        this.form.mobile = row.mobile;
      },
      onSure() {
      // console.log(this.form)
      this.list.forEach(item=> {
          if(item.id == this.form.id) {
            item.role_name = this.form.role_name;
            item.username = this.form.username;
            item.mobile = this.form.mobile;
          }
      })
      this.isShow = false;
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onClick() {
          var user = {
              role_name: this.role,
              username: this.user,
              mobile: this.mobile
          }
          this.showList.push(user)
          this.dialogFormVisible = false;
      },
      onSearch() {
          this.showList = []
          this.list.forEach(item=> {
              if(item.role_name.includes(this.searchRoleName)) {
                  this.showList.push(item)
                  return
              }
            //   if(item.username.includes(this.searchUserName)) {
            //       this.showList.push(item);
            //       return
            //   }
          })
      }
    }
}
</script>

<style>
.main {
    margin: 10px;
}
.main_box {
    height: 90vh;
    overflow: scroll;
}
</style>